<template>
  <div class="page">

    <el-form ref="addForm" class="add_hospital_form" size="small" :model="addForm" :rules="addFormRules" label-width="140px" :disabled="status == 3">
      <div class="title">基础信息</div>
      <div class="base_info">
        <el-form-item label="姓名：" prop="name">
          <el-input v-model.trim="addForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model.trim="addForm.phone" maxlength="11" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="性别：" prop="gender">
          <el-radio-group v-model="addForm.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄：" prop="age">
          <el-input v-model.number="addForm.age" placeholder="请输入年龄" />
        </el-form-item>
        <el-form-item label="医院：" prop="hospitalId">
          <hospital-select v-model="addForm.hospitalId"></hospital-select>
        </el-form-item>
      </div>

      <div class="drag_box" ref="dragBox">
        <div class="image_cell" ref="imageCell" v-for="(item,index) in (addForm.pics||[])" :key="`img_${index}`">
          <i class="el-icon-circle-close icon_delete" id="icon_delete" @click="removeImage(item,'pics')"></i>
          <el-image class="el_image" :src="item.url"></el-image>
        </div>
        <el-upload class="drag_upload" :action="COMMONFILEUPLOAD" v-if="!addForm.pics||addForm.pics.length<=0" :show-file-list="false" :limit="1" :headers="uploadHeaders" :on-success="(response, file, fileList) =>
              onSuccess(response, file, fileList, 'pics')">
          <div class="upload_text">
            <i class="el-icon-plus" />
            <span>点击上传</span>
          </div>
        </el-upload>
        <template v-for="(item,index) in dragList">
          <VueDragResize class="drag_cell" :key="`drag_${index}`" :class="getClassNames(item.toothNum)" :isActive="item.isActive" :w="item.width" :h="item.height" :minw="300" :x="item.left" :y="item.top" :parentLimitation="true" @clicked="dragClickEvent(item,index)" @deactivated="onDeactivated(item,index)" v-on:dragging="onDragging($event,item, index)" v-on:resizing="onResize($event,item, index)">
            <p class="desc">
              <span>{{showName(item)}}</span>
            </p>
            <div class="left_line"></div>
            <div class="top_line"></div>
          </VueDragResize>
        </template>
      </div>

      <div class="title">口腔问题&治疗方案</div>

      <div class="teeth_box">
        <div class="cell_box">
          <el-popover v-for="(item,index) in teethTopLeftList" :key="`tf_${index}`" popper-class="el_popover" placement="left" trigger="click">
            <div class="" v-if="teethActive">
              <el-checkbox-group v-model="question[teethActive]" class="el_check_group" @change="onChangeQuestion">
                <el-checkbox v-for="(item,index) in questionList" :key="`tfcheck_${index}`" :label="item.id" :value="item.name">{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div slot="reference" class="cell" :class="teethActive == item.label?'cell_active':''" @click="teethEvent(item)">
              <div class="img_box" :key="randomKey">
                <img :src="require(`@/assets/images/teeth/${item.active}`)" alt="" v-if="teethActive == item.label || showTeethActive(item.label)">
                <img :src="require(`@/assets/images/teeth/${item.icon}`)" alt="" v-else>
              </div>
              <div class="name">{{item.label}}</div>
            </div>
          </el-popover>
        </div>
        <div class="cell_box">
          <el-popover v-for="(item,index) in teethTopRightList" :key="`tr_${index}`" popper-class="el_popover" placement="left" trigger="click">
            <div class="" v-if="teethActive">
              <el-checkbox-group v-model="question[teethActive]" class="el_check_group" @change="onChangeQuestion">
                <el-checkbox v-for="(item,index) in questionList" :key="`trcheck_${index}`" :label="item.id" :value="item.name">{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div slot="reference" class="cell" :class="teethActive == item.label?'cell_active':''" @click="teethEvent(item)">
              <div class="img_box">
                <img :src="require(`@/assets/images/teeth/${item.active}`)" alt="" v-if="teethActive == item.label || showTeethActive(item.label)">
                <img :src="require(`@/assets/images/teeth/${item.icon}`)" alt="" v-else>
              </div>
              <div class="name">{{item.label}}</div>
            </div>
          </el-popover>
        </div>
      </div>

      <div class="teeth_box bottom_box">
        <div class="cell_box">
          <el-popover v-for="(item,index) in teethBottomLeftList" :key="`bf_${index}`" popper-class="el_popover" placement="left" trigger="click">
            <div class="" v-if="teethActive">
              <el-checkbox-group v-model="question[teethActive]" class="el_check_group" @change="onChangeQuestion">
                <el-checkbox v-for="(item,index) in questionList" :key="`bfcheck_${index}`" :label="item.id" :value="item.name">{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div slot="reference" class="cell" :class="teethActive == item.label?'cell_active':''" @click="teethEvent(item)">
              <div class="name">{{item.label}}</div>
              <div class="img_box">
                <img :src="require(`@/assets/images/teeth/${item.active}`)" alt="" v-if="teethActive == item.label || showTeethActive(item.label)">
                <img :src="require(`@/assets/images/teeth/${item.icon}`)" alt="" v-else>
              </div>
            </div>
          </el-popover>
        </div>
        <div class="cell_box">
          <el-popover v-for="(item,index) in teethBottomRightList" :key="`br_${index}`" popper-class="el_popover" placement="left" trigger="click">
            <div class="" v-if="teethActive">
              <el-checkbox-group v-model="question[teethActive]" class="el_check_group" @change="onChangeQuestion">
                <el-checkbox v-for="(item,index) in questionList" :key="`brcheck_${index}`" :label="item.id" :value="item.name">{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div slot="reference" class="cell" :class="teethActive == item.label?'cell_active':''" @click="teethEvent(item)">
              <div class="name">{{item.label}}</div>
              <div class="img_box">
                <img :src="require(`@/assets/images/teeth/${item.active}`)" alt="" v-if="teethActive == item.label || showTeethActive(item.label)">
                <img :src="require(`@/assets/images/teeth/${item.icon}`)" alt="" v-else>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
      <el-form-item label="" label-width="180px">
        <template v-if="teethActive">
          <div class="desc_title"><span class="cred">*</span>选中了{{teethActive}}号牙，建议采取已下治疗方案：</div>
          <div class="">
            <el-checkbox-group v-model="plan[teethActive]">
              <el-checkbox v-for="(item,index) in planList" :key="index" :label="item.id" :value="item.name">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </template>
      </el-form-item>
      <el-form-item label="不及时治疗引发的后果：" label-width="180px">
        <el-input type="textarea" v-model="addForm.consequence" :rows="5" resize="none" />
      </el-form-item>
      <el-form-item label="口腔健康得分：" label-width="180px">
        <div class="score_box">
          <el-input v-model="addForm.oralCavityScore" disabled />
          <!-- <el-button type="primary" class="btn" plain @click="addScore">计算</el-button> -->
        </div>
      </el-form-item>
      <el-form-item label="口腔情况小结：" label-width="180px">
        <div class="total_box">
          <div class="total_cell">
            <span>现有牙齿</span>
            <el-input-number v-model="addForm.existingCnt" size="mini" class="sort_input" :controls="false"></el-input-number>
            <span>颗</span>
          </div>
          <div class="total_cell">
            <span>缺失牙齿</span>
            <el-input-number v-model="addForm.defectCnt" size="mini" class="sort_input" :controls="false"></el-input-number>
            <span>颗</span>
          </div>
          <div class="total_cell">
            <span>智齿</span>
            <el-input-number v-model="addForm.wisdomCnt" size="mini" class="sort_input" :controls="false"></el-input-number>
            <span>颗(阻生智齿</span>
            <el-input-number v-model="addForm.impactionCnt" size="mini" class="sort_input" :controls="false"></el-input-number>
            <span>颗</span>
          </div>
          <div class="total_cell">
            <span>患龋齿牙齿</span>
            <el-input-number v-model="addForm.cariesCnt" size="mini" class="sort_input" :controls="false"></el-input-number>
            <span>颗</span>
          </div>
          <div class="total_cell">
            <span>患根尖周炎牙齿</span>
            <el-input-number v-model="addForm.periodontitisCnt" size="mini" class="sort_input" :controls="false"></el-input-number>
            <span>颗</span>
          </div>
          <div class="total_cell">
            <span>充填物修复牙齿</span>
            <el-input-number v-model="addForm.fillingsCnt" size="mini" class="sort_input" :controls="false"></el-input-number>
            <span>颗，经根管填充修复牙齿</span>
            <el-input-number v-model="addForm.rootCanalCnt" size="mini" class="sort_input" :controls="false"></el-input-number>
            <span>颗，冠修复牙齿</span>
            <el-input-number v-model="addForm.crownCnt" size="mini" class="sort_input" :controls="false"></el-input-number>
            <span>颗，种植体</span>
            <el-input-number v-model="addForm.implantCnt" size="mini" class="sort_input" :controls="false"></el-input-number>
            <span>颗</span>
          </div>
        </div>
        <el-checkbox v-model="addForm.alveolarBone" :true-label="1" :false-label="0">牙槽骨有骨吸收症状</el-checkbox>
      </el-form-item>
      <el-form-item label="" label-width="180px">
        <el-button type="primary" :loading="loading" @click="saveInfo">保 存</el-button>
        <el-button type="default" @click="goBack()">取 消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import { COMMONFILEUPLOAD } from "@/http/system";
import { deepClone, showToast } from "@/common/util";
import "viewerjs/dist/viewer.css";
import { api as viewerApi } from "v-viewer";
import VueDragResize from "vue-drag-resize";
import {
  BASEURL,
  GETTREATMENTOPTIONS,
  GETORALCAVITYOPTIONS,
  ADDREPORTINFO,
  EDITREPORTINFO,
  GETREPORTINFO,
} from "@/http/report";
export default {
  components: {
    VueDragResize,
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      status: "",
      addForm: {},
      randomKey: "",
      areaRows: 5,
      areaResize: "none",
      COMMONFILEUPLOAD: COMMONFILEUPLOAD,
      uploadHeaders: {},
      addFormRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        smsContentConfig: [
          { required: true, message: "请输入短信交通说明", trigger: "blur" },
        ],
        orderNum: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      projectList: [],
      cityList: [],
      loading: false,
      dragList: [],
      teethTopLeftList: [
        { label: 18, icon: "teeth_18.png", active: "teeth_active_18.png" },
        { label: 17, icon: "teeth_17.png", active: "teeth_active_17.png" },
        { label: 16, icon: "teeth_16.png", active: "teeth_active_16.png" },
        { label: 15, icon: "teeth_15.png", active: "teeth_active_15.png" },
        { label: 14, icon: "teeth_14.png", active: "teeth_active_14.png" },
        { label: 13, icon: "teeth_13.png", active: "teeth_active_13.png" },
        { label: 12, icon: "teeth_12.png", active: "teeth_active_12.png" },
        { label: 11, icon: "teeth_11.png", active: "teeth_active_11.png" },
      ],
      teethTopRightList: [
        { label: 21, icon: "teeth_21.png", active: "teeth_active_21.png" },
        { label: 22, icon: "teeth_22.png", active: "teeth_active_22.png" },
        { label: 23, icon: "teeth_23.png", active: "teeth_active_23.png" },
        { label: 24, icon: "teeth_24.png", active: "teeth_active_24.png" },
        { label: 25, icon: "teeth_25.png", active: "teeth_active_25.png" },
        { label: 26, icon: "teeth_26.png", active: "teeth_active_26.png" },
        { label: 27, icon: "teeth_27.png", active: "teeth_active_27.png" },
        { label: 28, icon: "teeth_28.png", active: "teeth_active_28.png" },
      ],
      teethBottomLeftList: [
        { label: 48, icon: "teeth_48.png", active: "teeth_active_48.png" },
        { label: 47, icon: "teeth_47.png", active: "teeth_active_47.png" },
        { label: 46, icon: "teeth_46.png", active: "teeth_active_46.png" },
        { label: 45, icon: "teeth_45.png", active: "teeth_active_45.png" },
        { label: 44, icon: "teeth_44.png", active: "teeth_active_44.png" },
        { label: 43, icon: "teeth_43.png", active: "teeth_active_43.png" },
        { label: 42, icon: "teeth_42.png", active: "teeth_active_42.png" },
        { label: 41, icon: "teeth_41.png", active: "teeth_active_41.png" },
      ],
      teethBottomRightList: [
        { label: 31, icon: "teeth_31.png", active: "teeth_active_31.png" },
        { label: 32, icon: "teeth_32.png", active: "teeth_active_32.png" },
        { label: 33, icon: "teeth_33.png", active: "teeth_active_33.png" },
        { label: 34, icon: "teeth_34.png", active: "teeth_active_34.png" },
        { label: 35, icon: "teeth_35.png", active: "teeth_active_35.png" },
        { label: 36, icon: "teeth_36.png", active: "teeth_active_36.png" },
        { label: 37, icon: "teeth_37.png", active: "teeth_active_37.png" },
        { label: 38, icon: "teeth_38.png", active: "teeth_active_38.png" },
      ],
      teethActive: "",
      planList: [],
      plan: {},
      questionList: [],
      question: {},
      offsetLeft: 0,
    };
  },
  created() {
    const token = sessionStorage.getItem("token");
    this.uploadHeaders = { Authorization: token };
    let options = {};
    let arr = [].concat(
      this.teethTopLeftList,
      this.teethTopRightList,
      this.teethBottomLeftList,
      this.teethBottomRightList
    );
    arr.map((k) => {
      options[k.label] = [];
    });
    this.plan = deepClone(options);
    this.question = deepClone(options);
  },
  mounted() {
    const o = this.$route.query;

    this.getALLPlan();
    this.getAllQuestion();

    /**
     * 新增：status：1
     * 编辑：status：2
     * 详情：status：3
     */

    this.status = o.status;
    if (o.id) {
      this.getInfo(this.$route.query.id);
    }
  },
  methods: {
    // 获取参数
    getParams() {
      let _this = this;
      let oParams = deepClone(this.addForm);
      let list = oParams.pics || [];
      let dragList = deepClone(this.dragList);
      let arr = [];
      list.map((k) => {
        arr.push(k.path);
      });

      dragList.map((k) => {
        k.problemIds = _this.question[k.toothNum];
        k.methodIds = _this.plan[k.toothNum];
        delete k.isActive;
        return k;
      });
      oParams.pics = arr;
      oParams.items = dragList;

      oParams.alveolarBone = oParams.alveolarBone;
      oParams.leftWidth = this.$refs.imageCell[0].offsetLeft;
      return oParams;
    },

    // 新增医院
    saveInfo() {
      const _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }

        const oParams = _this.getParams();

        _this.loading = true;
        _this.addScore();
        let query = _this.$route.query;
        // 编辑报告
        if (query.id) {
          oParams.id = query.id;
          EDITREPORTINFO(oParams).then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              showToast({
                message: "编辑成功",
                type: "success",
              });
              _this.goBack();
            }
          });
          return false;
        }
        ADDREPORTINFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    /** 监听文件上传成功 */
    onSuccess(response, file, fileList, id) {
      console.log(response);
      if (response.code == 200) {
        const obj = this.addForm[id] || [];
        const n = {};
        n.name = response.data;
        n.url = BASEURL + response.data;
        n.path = response.data;
        obj.push(n);
        this.$set(this.addForm, id, obj);
      }
    },

    // 获取医院详情
    getInfo(id) {
      let _this = this;
      GETREPORTINFO({ id: id }).then((res) => {
        const o = res.data || {};
        let oParams = {};
        oParams.name = o.name;
        oParams.consequence = o.consequence;
        oParams.gender = Number(o.gender);
        oParams.oralCavityScore = o.oralCavityScore;
        oParams.phone = o.phone;
        oParams.age = o.age;

        let arr = [];
        if (o.pics && o.pics.length > 0) {
          o.pics.map((k) => {
            arr.push({
              path: k,
              name: k,
              url: BASEURL + k,
            });
          });
        }

        if (o.items && o.items.length > 0) {
          o.items.map((k) => {
            let m = {};
            m.toothNum = k.toothNum;
            m.width = k.width;
            m.height = k.height;
            m.top = k.top;
            m.left = k.left;
            _this.dragList.push(m);
            _this.plan[k.toothNum] = k.methodIds || [];
            _this.question[k.toothNum] = k.problemIds || [];
          });
        }

        // existingCnt;
        // defectCnt;
        // wisdomCnt;
        // impactionCnt;
        // cariesCnt;
        // periodontitisCnt;
        // fillingsCnt;
        // rootCanalCnt;
        // crownCnt;
        // implantCnt;
        // alveolarBone;

        oParams.existingCnt = o.existingCnt;
        oParams.defectCnt = o.defectCnt;
        oParams.wisdomCnt = o.wisdomCnt;
        oParams.impactionCnt = o.impactionCnt;
        oParams.cariesCnt = o.cariesCnt;
        oParams.periodontitisCnt = o.periodontitisCnt;
        oParams.fillingsCnt = o.fillingsCnt;
        oParams.rootCanalCnt = o.rootCanalCnt;
        oParams.crownCnt = o.crownCnt;
        oParams.implantCnt = o.implantCnt;
        oParams.alveolarBone = o.alveolarBone;

        oParams.pics = arr;
        this.addForm = oParams;
      });
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },

    // 预览图片
    previewImage(row) {
      this.imageList = [row.url];
      viewerApi({
        images: this.imageList,
      });
    },

    // 删除图片
    removeImage(row, id) {
      this.imageList = [];
      this.$set(this.addForm, id, []);
    },

    // 拖动组件点击事件
    dragClickEvent(row, index) {
      let list = this.dragList;
      list.map((k) => {
        k.isActive = false;
      });
      row.isActive = true;
      this.$set(this.dragList, index, row);
    },

    // 组件失去焦点事件
    onDeactivated(row, index) {
      row.isActive = false;
      this.$set(this.dragList, index, row);
    },

    // 监听组件拖动
    onDragging(newRect, row, index) {
      row.left = newRect.left;
      row.top = newRect.top;
      this.$set(this.dragList, index, row);
    },

    // 监听组件改变大小
    onResize(newRect, row, index) {
      row.width = newRect.width;
      row.height = newRect.height;
      this.$set(this.dragList, index, row);
    },

    // 牙齿点击事件
    teethEvent(row) {
      this.teethActive = row.label;
    },

    // 获取所有的治疗方案
    getALLPlan() {
      GETTREATMENTOPTIONS().then((res) => {
        this.planList = res.data || [];
      });
    },

    // 获取所有的口腔问题
    getAllQuestion() {
      GETORALCAVITYOPTIONS().then((res) => {
        this.questionList = res.data || [];
      });
    },

    // 监听方案改变
    onChangeQuestion(e) {
      let leftList = {
        18: 1,
        17: 2,
        16: 3,
        15: 4,
        14: 5,
        13: 6,
        12: 7,
        11: 8,
        21: 9,
        22: 10,
        23: 11,
        24: 12,
        25: 13,
        26: 14,
        27: 15,
        28: 16,
        48: 1,
        47: 2,
        46: 3,
        45: 4,
        44: 5,
        43: 6,
        42: 7,
        41: 8,
        31: 9,
        32: 10,
        33: 11,
        34: 12,
        35: 13,
        36: 14,
        37: 15,
        38: 16,
      };
      let current = this.teethActive;
      let dragList = this.dragList;
      let idx = dragList.findIndex((k) => k.toothNum == current);

      let tag = this.$refs.imageCell[0];
      let _left = tag.offsetLeft;
      this.offsetLeft = tag.offsetLeft;

      this.randomKey = Math.random();
      if (idx >= 0) {
        // 删除
        if (!e || e.length <= 0) {
          this.dragList = dragList.filter((k) => k.toothNum != current);
        }
        this.addScore();
        return false;
      }
      console.log(_left);

      if (e && e.length > 0) {
        let o = {};
        o.toothNum = current;
        o.width = 300;
        o.height =
          Number(current) < 30
            ? 245 + this.getBoxTop(current)
            : 145 + this.getBoxTop(current);
        o.top = Number(current) < 30 ? 60 - this.getBoxTop(current) : 420;
        o.left =
          Number(_left) +
          206 +
          leftList[Number(current)] * 37 -
          this.getBoxLeft(current);
        dragList.push(o);
      }
      this.addScore();
    },

    // 展示名称
    showName(row) {
      let str = [];
      let arr = [];
      let list = this.questionList;
      let question = this.question[row.toothNum];
      arr = list.filter((k) => {
        let idx = question.findIndex((j) => j == k.id);
        return idx >= 0;
      });
      arr.map((k) => {
        str.push(k.name);
      });
      return str.toString();
    },

    // 计算
    addScore() {
      let total = 0;
      let arr = [];
      let list = this.questionList;
      let question = this.question;
      for (let k in question) {
        let o = question[k];
        if (o && o.length > 0) {
          arr = arr.concat(o);
        }
      }

      arr.map((k) => {
        let m = list.find((j) => j.id == k);
        if (m) {
          total += Number(m.code);
        }
      });

      let result = 98 - total;

      if (result < 38) {
        result = 38;
      }
      this.$set(this.addForm, "oralCavityScore", result);
    },

    // 生成图片
    createImage() {
      let _this = this;
      let target = this.$refs.dragBox;
      return new Promise((resolve, reject) => {
        resolve();

        // html2canvas(target, {
        //   logging: false,
        //   scale: 1,
        //   // dpi: 96,
        //   useCORS: true,
        //   allowTaint: true,
        //   ignoreElements: (element) => {
        //     console.log(element.id == "icon_delete");
        //     if (element.id == "icon_delete") {
        //       return true;
        //     }
        //   },
        // }).then((canvas) => {
        //   console.log(canvas);
        //   var data = canvas.toDataURL("image/png");
        //   let blob = _this.dataURLtoFile(data, "image/png");
        //   let file = new File([blob], new Date() + ".png");
        //   let headers = _this.uploadHeaders;
        //   let params = new FormData();
        //   params.append("file", file);
        //   headers["Content-Type"] = "multipart/form-data";
        //   axios({
        //     url: COMMONFILEUPLOAD,
        //     data: params,
        //     headers: headers,
        //     method: "POST",
        //   })
        //     .then((res) => {
        //       resolve(res.data);
        //     })
        //     .catch((error) => {
        //       reject(error);
        //     });
        // });
      });
    },

    // 图片转换成blod
    dataURLtoFile(dataURI, type) {
      let binary = atob(dataURI.split(",")[1]);
      let array = [];
      for (var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], { type: type });
    },

    // 是否选中
    showTeethActive(id) {
      let list = this.dragList;
      if (!id) {
        return false;
      }
      let idx = list.findIndex((k) => k.toothNum == id);
      if (idx < 0) {
        return false;
      } else {
        return true;
      }
    },

    // 动态设置牙齿className
    getClassNames(id) {
      if (!id) {
        return "";
      }

      // 左上
      if (id >= 11 && id <= 18) {
        return "drag_cell_left_top";
      }

      // 右上
      if (id >= 21 && id <= 28) {
        return "drag_cell_right_top";
      }

      //左下
      if (id >= 41 && id <= 48) {
        return "drag_cell_left_bottom";
      }

      // 右下
      if (id >= 31 && id <= 38) {
        return "drag_cell_right_bottom";
      }
    },

    // 获取定位
    getBoxTop(id) {
      if (!id) {
        return "";
      }
      if (id % 3 == 0) {
        return 30;
      }
      if (id % 3 == 2) {
        return 20;
      }
      if (id % 3 == 1) {
        return 10;
      }
    },

    // 获取左侧
    getBoxLeft(id) {
      if (!id) {
        return "";
      }

      // 左上
      if (id >= 11 && id <= 18) {
        return 300;
      }

      // 右上
      if (id >= 21 && id <= 28) {
        return 0;
      }

      //左下
      if (id >= 41 && id <= 48) {
        return 300;
      }

      // 右下
      if (id >= 31 && id <= 38) {
        return 0;
      }
    },
  },
};
</script>
<style lang="scss">
.add_hospital_form {
  .a_select {
    width: 100%;
  }
}
.el_input_number {
  .el-input__inner {
    text-align: left;
  }
}
.el_popover {
  background: rgba(0, 0, 0, 0.75);
  border: 0.5px solid rgba(220, 220, 220, 1);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1),
    0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.05);
  .popper__arrow {
    border-left-color: rgba(0, 0, 0, 0.75) !important;
  }
  .popper__arrow:after {
    border-left-color: rgba(0, 0, 0, 0.75) !important;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/style/report.scss";
</style>
